<!--  -->
<template>
   <div class='startpage'>
       <div class="famous">
           <p class="sentence">没有被听见不是沉默的理由。</p>
           <p class="book">《悲惨世界》</p>
       </div>
       <div class="gostart" @click="gostart">
           <span>进入</span>
           <svg t="1702361466956" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4417" id="mx_n_1702361466957" width="30" height="30"><path d="M511.972 0.5c-218.106 0-404.299 136.562-477.843 328.821l79.097 0c21.456-46.774 51.28-89.855 88.754-127.331 82.806-82.811 192.897-128.419 309.992-128.419 117.111 0 227.216 45.608 310.031 128.421C904.82 284.805 950.429 394.9 950.429 512c0 117.108-45.608 227.209-128.422 310.018-82.813 82.807-192.922 128.411-310.035 128.411-117.099 0-227.19-45.604-309.994-128.409-37.477-37.477-67.301-80.562-88.761-127.341L34.125 694.679C107.666 886.95 293.862 1023.5 511.976 1023.5c282.498 0 511.524-228.999 511.524-511.5C1023.5 229.529 794.474 0.5 511.972 0.5zM399.796 667.009l51.669 51.669L658.143 512 451.465 305.322l-51.671 51.67 118.475 118.472L0.5 475.464l0 73.072 517.769 0L399.796 667.009z" fill="#457f58" p-id="4418"></path></svg>
       </div>
   </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import { getip } from '@/api/webapi.js'
export default {
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data () {
    // 这里存放数据
    return {

    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    gostart () {
      this.$router.push('/main')
    },
    postUserIp () {
      getip().then((res) => {
      })
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {
    this.postUserIp()
  }
}
</script>
<style lang='less' scoped>
.startpage{
    background-image: url('../assets/Splash.png');
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100%;
}
.famous{
    position: absolute;
    width: 90%;
    left: 50%;
    transform: translate(-50%,0);
    color: #457f58;
    .sentence{
        width: 100%;
    }
    .book{
        width: 100%;
        text-align: right;
    }
}
.gostart{
    height: 54px;
    background: #ffffff;
    border-radius: 30px;
    position: absolute;
    width: 80%;
    left: 50%;
    bottom: 20px;
    transform: translate(-50%,0);
    display: flex;
    align-items: center;
    justify-content: space-around;
    span{
        font-size: 20px;
        font-weight: 600;
    }
}
</style>
